<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <!--这是商品展示页面-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="https://cdn.tmooc.cn/tmooc-web/css/iconfont.css"/>
    <link rel="stylesheet" href="https://cdn.tmooc.cn/tmooc-web/css/style.css"/>
    <script src="https://cdn.tmooc.cn/tmooc-web/js/jquery-2.1.1.js"></script>
    <title>商品详情</title>
    <style>
        body {
            background-color: lavenderblush;
            padding: 0;
        }

        a {
            text-decoration: none
        }

    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header height="60px">
            <div class="md2018033001lty" style="background-color: #6e6e6e">
                <div class="container">
                    <div class="tmooc-logo pull-left" style="margin-top: 25px">
                        <a href="index.html">
                            <img src="./images/logob.png"/>
                        </a>
                    </div>
                    <div>
                        <ul class="slide-nav pull-left clearfix" style="margin-left: 200px">
                            <li><a href="purchase.html">首页</a></li>
                            <li><a href="">服务</a></li>
                            <li><a href="">团队</a></li>
                            <li><a href="">动态</a></li>
                            <li><a href="">帮助</a></li>
                        </ul>
                    </div>
                    <div class="login-area pull-right " id="login_statelty">
                        <!--未登录状态-->
                        <ul class="no-login clearfix">
                            <li><a id="register_xxw"
                                   href="register.html">注册</a></li>
                            <li class="line">|</li>
                            <li><a id="login_xxw" href="userLogin.html">登录</a></li>
                        </ul>
                        <!--登录状态-->
                        <div class="logined hide">
                            <div class="md-2018040202-lty">
                                <div class="drop-menu" id="js_init_dropmenu">
                                    <div class="md-2018040801-lty">
                                        <a href="">
                                            <img class="js-headpic-xxw" id="tobbar_userimg"
                                                 src="https://cdn.tmooc.cn/tmooc-web/css/img/user-head.jpg" alt=""/>
                                        </a>
                                    </div>
                                    <ul class="drop-menu-list bgcolor-fff">
                                        -->
                                        <li class="user-name link-color"><a
                                                href=""
                                                id="tobbar_username">我的服务</a></li>
                                        <li><a href="">个人中心</a>
                                        </li>
                                        <li><a href="">消息中心 <span
                                                class="js-mes-length2"></span></a></li>
                                        <li><a href="#" id="js_loginout">退出登录</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--搜索框-->
                    <div class="search-wrap pull-right">
                        <div class="search-area">
                            <input id="js_search_inp" type="text" @keydown.native.enter="search()" v-model="wd" class="search-input" placeholder="想要些什么呢"/>
                        </div>
                        <div class="showhide-search" id="js_control_search">
                            <i class="cusfont cusfont-search" @click="search()"></i>
                        </div>
                    </div>
                </div>

            </div>
        </el-header>
        <el-main>
            <div style="text-align: center;height: 100px">
                <template>
                    <el-tabs  type="card" style="margin-left: 400px" v-model="activeIndex" @tab-click="handleSelect">
                        <el-tab-pane :label="c.name" style="margin-right: 475px" v-for="c in categoryArr" style="font-size: 15px">
                            <el-link type="info" v-for="cc in childrenCategoryArr" :underline="false"
                                     style="margin-bottom: 15px;margin-left: 20px">
                                {{cc.name}}
                            </el-link>
                        </el-tab-pane>
                    </el-tabs>
                </template>
            </div>
            <el-divider></el-divider>

            <el-row :gutter="20">
                <el-col :span="8">
                    <el-card width="100%" height="250px">
                        <img :src="product.pictures" width="100%" height="550px">
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <p style="font-size: 25px">{{product.goodsName}}</p>
                    <el-divider></el-divider>
                    <p style="font-size: 15px;color:#666">发布时间：{{product.created}}</p>

                    <p style="color: #666;font-size: 15px">销量:{{product.sales}} 浏览量:xxx 库存：xxx</p>
                    <p style="font-size: 25px;font-weight: bold">￥{{product.listPrice}}
                    </p>
                    <br>
                    <el-button :plain="true" @click="open2">加入购物车</el-button>
                    <!--二维码开始-->
                    <br>
                    <br>
                    <br>
                    <el-row :gutter="20" style="text-align: center">
                        <el-col :span="8">
                            <el-card>
                                <img src="./images/ewm.png" width="100%" alt="">
                            </el-card>
                            <span>扫码关注公众号</span>
                        </el-col>
                        <el-col :span="8">
                            <el-card>
                                <img src="./images/ewm.png" width="100%" alt="">
                            </el-card>
                            <span>扫码下载App</span>
                        </el-col>
                    </el-row>
                    <!--二维码结束-->
                </el-col>
            </el-row>
            <br>
            <br>
            <el-divider content-position="center"></el-divider>
            <div style="text-align: center">
                <span style="font-size: 40px;font-family: 幼圆;float: left" >精彩评论</span>
                <br>
                <br>
                <br>
                <span style="font-size: 20px;font-family: 幼圆;">暂无任何评论</span>

            </div>
        </el-main>
    </el-container>
    <el-container>
        <el-footer>
            <div style="height: 95px;
            margin-bottom: -30px"></div>
            <div style="height: 100px;font-size: 14px;background-color: #3f3f3f;
            color: #b1b1b1;text-align: center;padding: 30px">
                <p>Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号</p>
                <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
                <p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>
            </div>
        </el-footer>
    </el-container>
</div>
<!-- 右侧悬浮框 start -->
<div class="md2018040901lty">
    <div class="nav-r">
        <ul class="guide-list">
            <li>
                <a href="" data-button_name="兑换奖品" target="_blank">
                    <p class="p p1"><i class="cusfont cusfont-duihuan"></i></p>
                    <p class="p p2 p-text font-12px">兑换奖品</p>
                </a>
            </li>
            <li>
                <a href="" target="_blank" data-button_name="消息中心"
                   style="position:relative;display: block;padding-top: 12px;color: #aaa;">
                    <i class="cusfont cusfont-xiaoxi" style="font-size: 30px;"></i>
                    <span class="js-mes-length3"></span>
                </a>
            </li>
            <li><a href="" data-button_name="线上客服" target="_blank">
                <p class="p p1"><i class="cusfont cusfont-xianshangkefu---"></i></p>
                <p class="p p2 p-text font-12px">线上客服</p>
            </a></li>
            <li class="ph">
                <a href="javascript:void(0)" data-button_name="热线电话">
                    <p class="p p1"><i class="cusfont cusfont-rexiandianhua-"></i></p>
                    <p class="p p2 p-text font-12px">热线电话</p>
                    <div class="ph-show">
                        <div>
                            <p class="ph1">投诉热线：400-000-8000</p>
                            <p class="ph2"><i class="cusfont cusfont-shijian-"
                                              style="margin-right: 4px;font-size: 14px"></i>服务时间：<span
                                    class="color-999">9:00-18:00</span></p>
                        </div>
                    </div>
                </a>
            </li>
            <li id="js_comback"><a href="#"><p class="p p1"><i class="cusfont cusfont-TOP-"></i></p></a></li>
        </ul>
    </div>
</div>
<template>
    <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
</template>
</body>
<!-- import Vue before Element -->
<!--引入Vue框架-->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                categoryArr:[],
                childrenCategoryArr:[],
                product:[],
                activeIndex:"",
                wd:""
            }
        },
        methods: {
            open2() {
                this.$message({
                    message: '添加成功',
                    type: 'success'
                });
            },
            search(){
                axios.create({headers: {'Authorization': localStorage.getItem('jwt')}}).get("http://localhost:8847/pets/getByWd?wd="+v.wd).then(function (response){
                    let json = response.data;
                    console.log(json)
                    if (json.code==200){
                        location.href = "/result.html?wd="+v.wd;
                    } else {
                        v.$message.error(response.data.message);
                        location.href="/404.html";
                    }
                })
            },
            handleSelect(){
                let cid = parseInt(this.activeIndex);
                console.log("cid=="+cid);
                location.href="/result.html?cid="+cid;
            }
        },
        created:function (){

            axios.create({headers: {'Authorization': localStorage.getItem('jwt')}}).get("http://localhost:8847/category/list").then(function (response){
                let json = response.data;
                console.log(json)
                if (json.code==200){
                    v.categoryArr = json.data;
                } else {
                    v.$message.error(response.data.message);
                }
            })
            axios.create({headers: {'Authorization': localStorage.getItem('jwt')}}).get("http://localhost:8847/category/childrenList?id="+1).then(function (response) {
                let json = response.data;
                console.log(json);
                if (json.code == 200) {
                    v.childrenCategoryArr = json.data;
                } else {
                    v.$message.error(response.data.message);
                }
            })


            let id = location.search.split("=")[1];
            axios.create({headers: {'Authorization': localStorage.getItem('jwt')}}).get("http://localhost:8847/pets/getById?id="+id).then(function (response){
                let json = response.data;
                console.log(json)
                if (json.code==200){
                    v.product = json.data;
                } else {
                    v.$message.error(response.data.message);
                    location.href="/404.html";
                }
            })

        }
    })
</script>
</html>